<template>
    <div>
        <div style="margin-bottom: 20px">
            <el-input type="text" placeholder="search" class="search" size="small" v-model="input1" style="border-radius: 4px; width:400px; left: 5%"></el-input>
            <el-button icon="search" type="primary" content="查询" class="button" @click="getData2" size="small" style="position: relative; left: 6%">查询</el-button>
        </div>
        <div id="getupbar"></div>
    </div>
</template>

<script>
    import echarts from 'echarts';/**/
    import '*/../../node_modules/echarts/theme/infographic.js';
    import data1 from '../../../static/data/data1.json';
    export default {
        data() {
            return {
                chart: null,
                courseData: [],
                tableData:[{}],
                courseNum: [],
                input1: ''
            };
        },
        methods: {
            getData2(){
                let url = BASE_URL + "GetMaxTop"
                let obj = {}
                obj.name=this.input1
                let json = JSON.stringify(obj)
                this.$http.post(url, json).then(function (data) {
                    this.tableData = data.data
                    for(let i = 0; i < this.tableData.length; i++){
                        this.courseData[i]=this.tableData[i].name
                        this.courseNum[i] = this.tableData[i].value
                    }
                    data1.getup.number = this.courseNum
                    data1.getup.time = this.courseData
                    console.log(data1.getup.number)
                    console.log(data1.getup.time)
                    this.drawbar('getupbar');
                }).catch(function (_error) {
                    this.$message({
                        message:'网络请求失败',
                        type:'error'
                    })
                    console.log(_error)
                    this.tableLoading = false;
                })
                return this.tableData
            },
            drawbar(id) {
                this.chart = echarts.init(document.getElementById(id), 'vintage');
                this.chart.setOption({
                    tooltip: {
                        trigger: 'axis'
                    },
                    toolbox: {
                        feature: {
                            magicType: {
                                type: ['line', 'bar']
                            },
                            saveAsImage: {},
                            dataView: {}
                        },
                        right: 15,
                        top: 40
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            name: '职位名称',
                            type: 'category',
                            boundrayGap: false,
                            data: this.courseData
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '元/月',
                            max: 1000000
                        }
                    ],
                    series: [
                        {
                            name: '工资',
                            type: 'bar',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top'
                                }
                            },
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                            data: this.courseNum
                        }
                    ]
                });
            },
        },
        mounted() {

            this.$nextTick(function() {
                this.getData2();
            });
        }
    }
</script>

<style scoped>
    #getupbar{
        position: relative;
        left: 50%;
        width: 90%;
        height: 600px;
        margin-left: -45%;
        box-shadow: 0 0 6px #8ca4ff;
        border-radius: 10px;
    }

    @media screen and (max-width: 470px) {
        #getuppie {
            height: 500px;
        }
    }
</style>
